<template>

	<el-input
	    v-model="keyword"
	    placeholder="请输入宿舍号"
	    class="input-with-select"
		style="width:50%"
		clearable
	>


	    <template #append>				
	        <el-button @click="search"><el-icon><Search /></el-icon></el-button> 
	    </template>        
	</el-input>
	<el-button primary @click="initAdd">添加</el-button>
	 <el-button warning @click="deleteBatch">批量删除</el-button>
	
	 
	  
	<el-table
	  :data="tableData"
	  style="width: 100%"
	  stripe
	  ref="multipleTable"
	   @selection-change="handleSelectionChange"
	   :header-cell-style="{background:'#eef1f6',color:'#606266'}"
	>
		<el-table-column min-width="15%" type="selection"></el-table-column>
		<el-table-column prop="id" label="id" sortable  />
		<el-table-column prop="dorm_no" label="宿舍号" sortable  />
		<el-table-column prop="building" label="宿舍楼" sortable />
		<el-table-column prop="grade" label="卫生评级" sortable />
		<el-table-column prop="lastGrade" label="上次卫生评级" sortable />
		<el-table-column prop="tot_grade" label="整体评级" sortable />
		<el-table-column prop="reason" label="未达标原因" sortable />
		<el-table-column label="操作" width="100"> 
		   <template #default="scope">
			  <el-button size="small" @click="initEdit(scope.row)"
				type="primary" circle><el-icon><Edit /></el-icon></el-button>
			  <el-button
				size="small"
				type="danger"
				@click="handleDelete(scope.row.id)"
				 circle><el-icon><Delete /></el-icon></el-button>
			</template>				
		</el-table-column>
	</el-table>    
	 <!-- 分页组件 -->
	<el-pagination
	  small
	  background
	  layout="prev, pager, next"
		:page-size="pageSize"
		:page-count="pageCount"
		:current-page="currentPage"
		@current-change="haddlePageChange"
	/> 
	  
		<!--  增加对话框 -->  
<el-dialog v-model="dialogVisible" title="添加" width="60%" draggable>
	  <!-- <span>增加</span> -->
	  <el-form :model="form" label-width="80px" :rules="formRules"  class="demo-ruleForm">
	      <el-form-item label="宿舍号" prop="dorm_no">
	        <el-input v-model="form.dorm_no" />
	      </el-form-item>
	      <el-form-item label="宿舍楼" prop="building">
	        <el-input v-model="form.building" />
	      </el-form-item>
		<el-form-item label="卫生评级" prop="grade">
			<el-input v-model="form.grade" />
		</el-form-item>
		<el-form-item label="上次卫生评级" prop="lastGrade">
			<el-input v-model="form.lastGrade" />
		</el-form-item>
		<el-form-item label="整体评级" prop="tot_grade">
			<el-input v-model="form.tot_grade" />
		</el-form-item> 
		<el-form-item label="未达标原因" prop="reason">
			<el-input v-model="form.reason" />
		</el-form-item>
	   </el-form>
	  <template #footer>
	    <span class="dialog-footer">
	      <el-button @click="dialogVisible = false">取消</el-button>
	      <el-button type="primary" @click="addSubmit()">提交</el-button>
	    </span>
	  </template>
	</el-dialog>
		
	<!--  修改对话框 -->
	<el-dialog v-model="editVisible" title="修改" width="60%" draggable>
		<el-form :model="form" label-width="80px" :rules="formRules"  class="demo-ruleForm">
	    <el-form-item label="宿舍号" prop="dorm_no">
	        <el-input v-model="form.dorm_no" />
	      </el-form-item>
	      <el-form-item label="宿舍楼" prop="building">
	        <el-input v-model="form.building" />
	      </el-form-item>
	    <el-form-item label="卫生评级" prop="grade">
	    	<el-input v-model="form.grade" />
	    </el-form-item>
	    <el-form-item label="上次卫生评级" prop="lastGrade">
	    	<el-input v-model="form.lastGrade" />
	    </el-form-item>
	    <el-form-item label="整体评级" prop="tot_grade">
	    	<el-input v-model="form.tot_grade" />
	    </el-form-item> 
	    <el-form-item label="未达标原因" prop="reason">
	    	<el-input v-model="form.reason" />
	    </el-form-item>
	   </el-form>
	  <template #footer>
	    <span class="dialog-footer">
	      <el-button @click="editVisible = false">取消</el-button>
	      <el-button type="primary" @click="editSubmit()">提交</el-button
	      >
	    </span>
	  </template>
	</el-dialog> 
	
</template>

<script setup>
	import {ref,toRefs,reactive,onMounted,getCurrentInstance} from 'vue'	
	let { proxy } = getCurrentInstance();
	//每页几条数据，初始值设置为10条
	var pageSize=ref(10)
	//当前页码，初值是1
	var currentPage=ref(1)
	//总页数
	var pageCount=ref(0)
	//表格用数据，初始为空
	let tableData=ref([]);
	
	
	
	function handleChange (item) {
		console.log('change', item)
	}

	function getTableData(){
		var param = { "pagination": {"pageNo":currentPage.value,"pag  eSize":pageSize.value}, "conditionList":[]};
		var jsonparam = JSON.stringify(param) 
		proxy.$http.post('/SanitaryCommonsFindAll',jsonparam)
		.then(res => {
			tableData.value=res.data.records;//把获取的服务端数据数组传递给tableData
			//后台返回总页数
			pageCount.value=res.data.totalPages;
			//console.log(tableData.vale)
		})
		.catch(err => {
			console.log(err)
		});
	}
	
	
	//onMounted钩子函数，组件加载完自动执行
	onMounted(()=>{
		getTableData();  //请求第一页的表格数据
	});
	
	
	let form=ref({});//修改或增加的一个对象

	//增加对话框显示与否
	const dialogVisible = ref(false)
	//增加初始化
	function initAdd(){
		 form.value={}  //清空增加对象
		 dialogVisible.value=true
	}
	//增加提交
	function addSubmit(){
		proxy.$http.post('/SanitaryCommonsAdd',form.value) //按增加数据的接口组织url
		.then(res => {
			dialogVisible.value = false //关闭对话框		
			getTableData();  //更新表格数据
			form.value={}  //清空增加对象
			alert(res.data.message)
		})
	}
	//点击改变页码时，当前页改变，根据新的URL参数重新获取后台数据
	function haddlePageChange(currentpage){			
		currentPage.value=currentpage;
		getTableData();
		
	}
	
	//修改对话框显示与否
	let editVisible=ref(false)
	//修改对话框显示出来，数据初始化
	const initEdit = (row) => {
		editVisible.value = true
		form.value=row  //要修改的对象赋值给对话框表单数据
	}
	//修改提交
	const editSubmit=()=>{
		proxy.$http.post('/SanitaryCommonsUpdate',form.value)  ////按修改数据的接口组织url
		.then(res => {								
			editVisible.value = false	//关闭对话框		
			getTableData();  //更新表格数据
			form.value={}  //清空修改对象
			alert(res.data.message)	
		})
	}
	const handleDelete = (id) => {
		proxy.$http.post('/SanitaryCommonsDelete'+'?id='+id)  //根据接口组织删除用url
		.then(res => {			
			getTableData();  //更新表格数据
			alert(res.data.message)
		})
	}
	
	let multipleSelection=ref([]);
	const handleSelectionChange=(val)=>{ //批量选择
		multipleSelection.value = val;
		console.log(multipleSelection.value)
	}
	//批量删除
	function deleteBatch(){
		if(multipleSelection.value){
			proxy.$http.post('/SanitaryCommonsDeleteInBatch',multipleSelection.value)  //根据接口组织删除用url：/school/deleteById/{id}
			.then(res => {			
				getTableData();  //更新表格数据
				alert(res.data.message)
			})
		}
		
	}	
	const keyword=ref('')
	let search=()=>{
		if(keyword.value!='')
			keyword.value!=null
		var param = { "pagination": {"pageNo":currentPage.value,"pageSize":pageSize.value}, "conditionList":[
	    {"value":keyword.value,"key":"宿舍号	 ","operator":"like"},
		]};
		var jsonparam = JSON.stringify(param) 
		proxy.$http.post("SanitaryCommonsFindAll",jsonparam)
		.then(res => {
			tableData.value=res.data.records;//把获取的服务端数据数组传递给tableData
			//总页数
			pageCount.value=Math.ceil(res.data.totalNum/pageSize.value);
			keyword.value==''
			if(res.data.totalNum ==0 && keyword.value !=null)
			alert(res.data.message)
		})
		.catch(err => {
			console.log(err)
		});
	}
	//文本框输入内容校验
	const isNum = (rule, value, callback) => {
		const no = /^[0-9]*$/
		if(value==''||value==null)  //补充了非空和长度校验
		    callback(new Error('学号不能为空!'))
		else if(value.length!=12)
			callback(new Error('学号数字个数应为12位!'))
		else if (!no.test(value)) {
			callback(new Error('请输入学号!'))
		} else {
			callback()
		}	  
	
	};
	const formRules = reactive({
		no: [
			{validator: isNum, trigger: 'blur'}  // validator是指用isNum方法做校验，可全部都用方法校验
		],		
		name: [
		  {required: true, message: '请输入姓名', trigger: 'blur'},
		  {min: 2, max: 10, message: '长度在2到 10 个字符', trigger: 'blur'}
		],		
	})
	

</script>
